<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  .el-tabs__item {
    color: #fff;
  }

  .el-tabs--card>.el-tabs__header {
    border: 0;
  }

  .el-tabs__item.is-active {
    background-color: #c81623;
    color: #fff;
  }

  .el-form-item__label {
    color: #fff;
  }

  .el-input.is-disabled .el-input__inner {
    color: #000;
  }
</style>

<body>
  <div id="userInfo">
    <div style="background-color: #181890;">
      <div style="width: 100%;height: 100%;">
        <!-- 头部 -->
        <header>
          <div style="display: flex; padding-top: 2%; padding-left: 3%;">
            <div style="flex: 1;">
              <div style="display: flex; padding-left: 5%;">
                <img src="../img/logo3.png" width="150px" alt="">
                <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
              </div>
            </div>
            <div class="div_header_div_ul">
              <div style="width: 80%;margin-top: 1.5%;">
                <ul style="display: flex;">
                  <li><a href="./home.html">首页</a></li>
                  <li><a href="./Century-old_brand.html">百年品牌</a></li>
                  <li><a href="./Brand_strength.html">品牌实力</a></li>
                  <li><a href="./cooperation.html">特许合作</a></li>
                  <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                  <li><a href="./Store_navigation.html">门店导航</a></li>
                  <li><a href="./contact.html">联系我们</a></li>
                  <li><a href="./message.html">留言</a></li>
                  <li id="li_1"><a href="./login.html">登录/注册</a></li>
                  <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
                </ul>
              </div>
              <div style="margin-top: 1.5%;">
                <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;"
                  v-model="name">
                <button style="border: 0;padding: 3px 5px;background-color: #fff;" @click="search()">搜索</button>
              </div>
            </div>
          </div>
        </header>
        <!-- 数据部分 -->
        <section style="padding: 3% 0;">
          <div class="container">
            <el-tabs type="card" :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="个人信息" name="个人信息" value="个人信息">
                <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
                  <el-form-item label="用户名" prop="name">
                    <el-input type="text" v-model="ruleForm.name" autocomplete="off" style="width: 300px;"></el-input>
                  </el-form-item>
                  <el-form-item label="账号" prop="account">
                    <el-input type="text" v-model="ruleForm.account" disabled style="width: 500px;"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                    <el-input type="text" v-model="ruleForm.phone" style="width: 500px;"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input type="text" v-model="ruleForm.email" style="width: 500px;"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="updateUser()">确认修改</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="我的订单" name="我的订单" value="我的订单">
                <el-table :data="dataForm" style="width: 100%">
                  <el-table-column prop="id" label="订单id" width="180">
                  </el-table-column>
                  <el-table-column prop="goodsName" label="商品名" width="180">
                  </el-table-column>
                  <el-table-column label="商品图片" width="100">
                    <template slot-scope="scope">
                      <img v-if="scope.row.goodsImg" width="100%" :src="url+'/download/'+scope.row.goodsImg">
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalPrice" label="总价格">
                  </el-table-column>
                  <el-table-column prop="goodsCount" label="数量">
                  </el-table-column>
                  <el-table-column prop="goodsType" label="类型">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" @click="deleteOrders(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="修改密码" value="修改密码">
                <el-form :model="passForm" status-icon label-width="100px" class="demo-ruleForm">
                  <el-form-item label="旧密码" prop="account">
                    <el-input type="password" v-model="passForm.account" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="checkPass">
                    <el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="password">
                    <el-input type="password" v-model.number="passForm.password"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="passSubForm()">确认</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </section>
      </div>
    </div>
    <!-- 页尾 -->
    <footer style="background-color: #000; padding: 3% 15%;">
      <div style="display: flex;">
        <div style="display: flex; width: 80%; flex-wrap: wrap;">
          <h6 class="footer_h6">首页</h6>
          <h6 class="footer_h6">百年品牌</h6>
          <h6 class="footer_h6">品牌实力</h6>
          <h6 class="footer_h6">特许合作</h6>
          <h6 class="footer_h6">传奇菜品</h6>
          <h6 class="footer_h6">门店导航</h6>
          <h6 class="footer_h6">联系我们</h6>
          <div style="width: 100%;padding-left: 3%;">
            <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
            <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
            <span class="footer_span">风险提示：投资有风险，请理性选择</span>
          </div>
        </div>
        <div>
          <img src="../img/erweima.jpg" width="150px" alt="">
        </div>
      </div>
    </footer>
  </div>
</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
      return;
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
      return;
    }
  }
</script>
<script>
  new Vue({
    el: '#userInfo',
    data() {
      return {
        activeName: '个人信息',
        tabPosition: 'left',
        name: '',
        passForm: {},
        dataForm: [],
        ruleForm: {},
        totalPrice: 0,
        dialogVisible: false,
        balance: 0.00,
        uri: 'http://localhost:9092',
        url: 'http://localhost:9092/common',
      };
    },
    created() {
      if (!localStorage.getItem("userId")) {
        window.location.href = './login.html';
        return;
      } else {
        this.pageUser();

      }
    },
    methods: {
      // 当点击分类时调用
      handleClick(el) {
        this.activeName = el.$attrs.value;
        if (this.activeName == "个人信息") {
          this.pageUser();
        } else if (this.activeName == "我的订单") {
          this.pageOrders();
        }
      },
      // 订单查询
      async pageOrders() {
        this.dataForm = []
        const { data: result } = await this.$http.get(this.uri + "/hot_orders/queryOne/" + localStorage.getItem("userId"));
        console.log(result);
        if (result.flag) {
          this.dataForm = result.list;
        } else {
          this.$message.info(result.message);
        }
      },
      // 删除订单
      async deleteOrders(id) {
        const { data: result } = await this.$http.get(this.uri + "/hot_orders/delete/" + id);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.message)
        }
        this.pageOrders();
      },
      // 查询个人信息
      async pageUser() {
        const { data: result } = await this.$http.get(this.uri + "/hot_user/queryOne/" + localStorage.getItem("userId"));
        console.log(result);
        // 拿到后端返回的数据
        this.ruleForm = result.l;
      },
      // 修改个人信息
      async updateUser() {
        const { data: result } = await this.$http.post(this.uri + "/hot_user/update", this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.error);
        }
        this.pageUser();
      },
      // 修改密码
      async passSubForm() {
        // 判断两次输入的密码是否一致
        if (this.passForm.checkPass !== this.passForm.password) {
          this.$message.error("两次输入的密码不一致，请重新输入");
          return;
        }
        // 获取当前用户的id
        this.passForm.id = localStorage.getItem("userId");
        // 密码输入一致，发送修改密码的请求
        const { data: result } = await this.$http.post(this.uri + "/hot_user/updatePass", this.passForm);
        if (result.flag) {
          // 这里表示修改成功，跳转登录页面
          window.location.href = './login.html';
          localStorage.removeItem("userId");
        } else {
          // 表示修改密码错误
          this.$message.error(result.message);
          // 清空数据
          this.passForm = {};
        }
      },
      // 搜索
      search() {
        localStorage.setItem("name", this.name);
        window.location.href = './Legendary_dishes.html';
      }
    }
  })
</script>

</html>